<script setup>
import { reactive, computed } from 'vue';

// 模拟购物车数据，使用reactive创建响应式数据
const cartItems101 = reactive([
{
    name: '蛋糕1',
    price: 100,
    quantity: 1,
    image: '/src/assets/1.jpg' // 
    
  },
  {
    name: '蛋糕2',
    price: 120,
    quantity: 1,
    image: '/src/assets/2.jpg' // 
    
  },
  {
    name: '蛋糕3',
    price: 430,
    quantity: 1,
    image: '/src/assets/3.jpg' // 
    
  },
  {
    name: '蛋糕4',
    price: 320,
    quantity: 1,
    image: '/src/assets/4.jpg' // 
    
  },
  {
    name: '蛋糕5',
    price: 301,
    quantity: 1,
    image: '/src/assets/5.jpg' // 
    
  }
]);

// 减少数量的方法
const decreaseQuantity = (index) => {
  if (cartItems101[index].quantity > 1) {
    cartItems101[index].quantity--;
  }
};

// 增加数量的方法
const increaseQuantity = (index) => {
  cartItems101[index].quantity++;
};

// 删除商品的方法
const deleteItem = (index) => {
  cartItems101.splice(index, 1);
};

// 计算总价钱的计算属性
const totalPrice101 = computed(() => {
  let sum = 0;
  cartItems101.forEach((item) => {
    sum += item.quantity *item.price;
  });
  return sum;
});

const totalquantity101 = computed(()=>{
  let sum = 0;
  cartItems101.forEach((item) => {
    sum += item.quantity;
  });
  return sum;
})
</script>

<template>
  <div class="shopping-cart-container">
    <h2>雷鑫洁的购物车</h2>
    <table class="shopping-cart-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>图片</th>
          <th>书名</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in cartItems101" :key="index" class="cart-item-row">
          <td>{{ index + 1 }}</td>
          <td><img :src="item.image" :alt="item.name" class="cart-item-image"></td>
          <td class="book-name-column">{{ item.name }}</td> <!-- 新增类名 -->
          <td>{{ item.price }}</td>
          <td class="quantity-column">
            <button @click="decreaseQuantity(index)" class="quantity-button minus">-</button>
            <span class="quantity-value">{{ item.quantity }}</span>
            <button @click="increaseQuantity(index)" class="quantity-button plus">+</button>
          </td>
          <td><button @click="deleteItem(index)" class="delete-button">删除</button></td>
        </tr>
      </tbody>
    </table>
    <div class="total-price-container">
      <span>总价钱为</span> 
      <span class="total-price-value">{{ totalPrice101 }}</span>
    </div>
    <div class="total-price-container">
      <span>总数量为</span> 
      <span class="total-price-value">{{ totalquantity101 }}</span>
    </div>
  </div> 
</template>

<style scoped>
.shopping-cart-container {
  width: 90%; /* 增大宽度 */
  margin: 50px auto;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 40px; /* 增大内边距 */
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.shopping-cart-table {
  width: 100%;
  border-collapse: collapse;
}

.shopping-cart-table th,
.shopping-cart-table td {
  text-align: left;
  padding: 12px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping-cart-table th {
  background-color: #f4f4f4;
  color: #111;
  font-weight: bold;
}

.cart-item-row {
  transition: background-color 0.3s ease;
}

.cart-item-row:hover {
  background-color: #f9f9f9;
}

.cart-item-image {
  width: 60px;
  height: auto;
  border-radius: 5px;
}

.quantity-button {
  border: none;
  background-color: inherit;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.minus {
  color: #000000;
}

.plus {
  color: #000000;
}

.quantity-button:hover {
  background-color: #f4f4f4;
}

.delete-button {
  border: none;
  background-color: inherit;
  cursor: pointer;
  color: #020202;
  transition: color 0.3s ease;
}

.delete-button:hover {
  color: #000000;
}

.total-price-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}

.total-price-value {
  font-weight: bold;
  color: #e73c3c;
}

.quantity-column {
  width: 120px;
  font-weight: bold;
}

.book-name-column {
  min-width: 150px;
}
</style>